<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue v-bind:style</title>
    <script src="./js/vue.min.js"></script>
    <style>
        div {
            margin: 30px 0;
        }
    </style>
</head>

<body>

    <div id="vm">

        <div v-bind:style="{color:'red'}">
            直接写样式 v-bind:style="{color:'red'}"
        </div>

        <div v-bind:style="{color:txtColor}">
            读取data值 v-bind:style="{color:txtColor}" , txtColor 在data里定义的颜色值
        </div>

        <div v-bind:style="{color:txtColor2}">
            动态改style值 v-bind:style="{color:txtColor2}" , txtColor2 在data里定义的颜色值 , 通过input 修改
            <input type="text" v-model="txtColor2" v-on:blur="changedFn" />
        </div>

        <div v-bind:style="txtColor3">
            对象 style值 v-bind:style="txtColor3"
        </div>

        <div v-bind:style="{display:showStatus}">
            style 控制显示隐藏 v-bind:style="{display:showStatus}"
        </div>

        <div>
            <button v-on:click="setShow()">显示</button>
            <button v-on:click="setHide()">隐藏</button>
        </div>

    </div>

    <script>
        var vm01 = new Vue({
            el: '#vm',
            data: {
                txtColor: 'green',
                txtColor2: '#ff00ff',
                txtColor3: {
                    color: '#2196f3',
                    fontSize: '30px'
                },
                showStatus: 'block'
            },
            methods: {
                changedFn(e) {
                    let color = e.currentTarget.value;
                    console.log('color->', color);
                    if (!this.checkIsColor(color)) {
                        alert('仅支持16进制颜色值，例如 #ff0000');
                        return false;
                    }
                    this.txtColor2 = color;
                },
                //检查是否是颜色值
                checkIsColor(color) {　　
                    var type = "^#[0-9a-fA-F]{6}$";　　
                    var re = new RegExp(type);　　
                    if (color.match(re) == null) {　　　　
                        type = "^[rR][gG][Bb][\(]([\\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?)[\\s]*,){2}[\\s]*(2[0-4]\\d|25[0-5]|[01]?\\d\\d?)[\\s]*[\)]{1}$";　　　　
                        re = new RegExp(type);　　　　
                        if (color.match(re) == null) {　　　　　　
                            return false;　　　　
                        } else {　　　　　　
                            return true;　　　　
                        }　　　
                    } else {　　　　
                        return true;　　
                    }
                },
                setShow() {
                    this.showStatus = 'block';
                },
                setHide() {
                    this.showStatus = 'none';
                }
            }
        })
    </script>

</body>

</html>